<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圆</title>
	<style>
        *{
            margin:0;
        }
        canvas{
            display: block;
            margin:0 auto;
            border:1px red solid;
        }
    </style>
</head>
<body>
	<canvas id="canvas"></canvas>

	
</body>
</html>
<script>
    var canvas = document.querySelector("#canvas");
    canvas.width = 800;
    canvas.height = 600;

    var ctx = canvas.getContext("2d");
    function random(a,b){
        return Math.ceil(Math.random() *(b-a) + a);
    }
    for(let i = 0;i<100;i++){
        var x = random(0,800);
        var y = random(0,600);
        var r = random(1,50);
        var color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
        drawArc(x,y,r,color);
    }    

        function drawArc(x,y,r,color){
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2);
            ctx.fillStyle = color;

            ctx.fill();
            ctx.closePath();
        }
</script>